<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 75%;
            margin: 0 auto;
        }
          table{
            width: 100%;
            text-align: center;
            
            
        }
        tr th,tr td{
            border: solid 1px #008c8c;
            padding-top: 10px;
            padding-bottom: 10px;
        }
    </style>
</head>
<body>
    <div>
        <div class="bd">
            <input type="text" id="ming" placeholder="请输入姓名">
            <input type="number" id="age" placeholder="请输入年龄">
            <input type="text" id="bie" placeholder="请输入性别">
            <input type="text" id="ai" placeholder="请输入爱好">
            <button onclick="btn()">提交</button>

        </div>
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th>
                        序号
                    </th>
                    <th>
                        姓名
                    </th>
                    <th>
                        年龄
                    </th>
                    <th>
                        性别
                    </th>
                    <th>
                        爱好
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>
                        1
                    </td>
                    <td>
                        李思远
                    </td>
                    <td>
                        18
                    </td>
                    <td>
                        男
                    </td>
                    <td>
                        敲代码
                    </td>
                    <td>
                        <button onclick="sy(0)">上移</button>
                        <button onclick="del(0)">删除</button>
                        <button onclick="xy(0)">下移</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        2
                    </td>
                    <td>
                        李小兵
                    </td>
                    <td>
                        55
                    </td>
                    <td>
                        男
                    </td>
                    <td>
                        打游戏
                    </td>
                    <td>
                        <button onclick="sy(1)">上移</button>
                        <button onclick="del(1)">删除</button>
                        <button onclick="xy(1)">下移</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        3
                    </td>
                    <td>
                        牛炳贺
                    </td>
                    <td>
                        25
                    </td>
                    <td>
                        男
                    </td>
                    <td>
                        网恋
                    </td>
                    <td>
                        <button onclick="sy(2)">上移</button>
                        <button onclick="del(2)">删除</button>
                        <button onclick="xy(2)">下移</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        4
                    </td>
                    <td>
                        连晓青
                    </td>
                    <td>
                        28
                    </td>
                    <td>
                        女
                    </td>
                    <td>
                        吃泡面
                    </td>
                    <td>
                        <button onclick="sy(3)">上移</button>
                        <button onclick="del(3)">删除</button>
                        <button onclick="xy(3)">下移</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        5
                    </td>
                    <td>
                        张璐
                    </td>
                    <td>
                        27
                    </td>
                    <td>
                        女
                    </td>
                    <td>
                        吃周黑鸭
                    </td>
                    <td>
                        <button onclick="sy(4)">上移</button>
                        <button onclick="del(4)">删除</button>
                        <button onclick="xy(4)">下移</button>
                    </td>
                </tr> -->
            </tbody>
        </table>
    </div>
    <script>
        var ming = document.querySelector('#ming');
        var age = document.querySelector('#age');
        var bie = document.querySelector('#bie');
        var ai = document.querySelector('#ai');
        var tbody = document.querySelector("tbody");
        var arr=[];

        if(localStorage.arr){
            arr=JSON.parse(localStorage.arr);
            show(arr);
        }else{
            arr=[];
        }
         
        function btn(){
            if(ming.value == ""||age.value == ""|| bie.value==""||ai.value==""){
                alert("请完善信息后提交");
                ming.value='';
                age.value='';
                bie.value='';
                ai.value='';
            }else{
                var obj = {
                    id: +new Date,
                    ming: ming.value,
                    age:age.value,
                    bie:bie.value,
                    ai:ai.value
                }
                arr.push(obj);
                localStorage.arr=JSON.stringify(arr)
                show(arr);
            }
        }
        //渲染
        function show(){
            str = "";
            for(var i=0;i<arr.length;i++){
                str += `<tr>
                    <td>
                        ${i+1}
                    </td>
                    <td>
                        ${arr[i].ming}
                    </td>
                    <td>
                        ${arr[i].age}
                    </td>
                    <td>
                        ${arr[i].bie}
                    </td>
                    <td>
                        ${arr[i].ai}
                    </td>
                    <td>
                        <button onclick="sy(${arr[i].id})">上移</button>
                        <button onclick="del(${arr[i].id})">删除</button>
                        <button onclick="xy(${arr[i].id})">下移</button>
                    </td>
                </tr>`
            }
            tbody.innerHTML=str;
        }
        //下移
        var td={};
        var a;
        function xy(id){
            for(var i=0;i<arr.length;i++){
                if(id == arr[i].id){
                    if(i==arr.length-1){
                        this.disabled=true;
                    }else{
                        td=arr[i];
                        a=i+1;
                        arr[i]=arr[a]
                        arr[a]=td;
                        localStorage.arr=JSON.stringify(arr);
                        show(arr);
                        break;
                    }
                   
                }
            }
           
        }
        //上移
        var td1={};
        var b;
        function sy(id){
            for(var i=0;i<arr.length;i++){
                if(arr[i].id == id){
                    if(i==0){
                        this.disabled=true;
                    }else{
                        
                        b=i-1;
                        td1=arr[i];
                        arr[i]=arr[b];
                        arr[b]=td1;
                        localStorage.arr=JSON.stringify(arr);
                        show(arr);
                        break;
                    }
                  
                }
            }
        }


        

        //删除
        function del(id){
            for(var i=0;i<arr.length;i++){
                if(id=arr[i].id){
                    arr.splice(i,1);
                }
            }
            localStorage.arr=JSON.stringify(arr);
            show(arr);
        }
    </script>
</body>
</html>